/*
 * @Author: peng.chen2 peng.chen2@rt-mart.com
 * @Date: 2025-07-23 10:28:26
 * @LastEditors: peng.chen2
 * @LastEditTime: 2025-08-01 14:26:13
 * @FilePath: /rt-monitoring/src/App.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { ElementRef, useEffect, useRef, useState } from 'react'
import { Drawer, message, Space, Spin, Splitter } from 'antd'
import dayjs from 'dayjs'
import Header from '@components/Layout/Header'
import RightWrap from '@components/Layout/RightWrap'
import TotalOverview from './components/TotalOverview'
import Particles from './components/PartclesBg'
import { TableProvider, useTableContext } from './contexts/TableContext'
import './styles/index.css'
import techAlertApi from './service/api'
import { useGlobalContext } from './contexts/GlobalContext'
type OverviewRef = React.ElementRef<typeof TotalOverview>
const App: React.FC = () => {
  const [messageApi, contextHolder] = message.useMessage()
  const { spinning } = useTableContext()
  const {
    businessSummary,
    businessDisposedSum,
    maintenanceSummary,
    maintenanceDisposedSum,
  } = useGlobalContext()
  const businessOverviewRef = useRef<OverviewRef>(null)
  const maintenanceOverviewRef = useRef<OverviewRef>(null)

  function onResize() {
    businessOverviewRef.current?.handleResize()
    maintenanceOverviewRef.current?.handleResize()
  }

  return (
    <div className="main">
      {contextHolder}
      <Spin spinning={spinning} fullscreen tip="Loading..."></Spin>
      <div className="absolute w-full h-full dashboard z-10">
        <Header />
        <Splitter onResize={onResize}>
          <Splitter.Panel
            defaultSize="33%"
            min="20%"
            max="70%"
            style={{ overflow: 'hidden' }}
          >
            <div className="flex flex-col gap-[20px] h-full pr-[10px]">
              <TotalOverview
                ref={businessOverviewRef}
                title="业务监控概览"
                total={businessSummary}
                disposedSum={businessDisposedSum}
              />
              <TotalOverview
                ref={maintenanceOverviewRef}
                title="运维监控概览"
                total={maintenanceSummary}
                disposedSum={maintenanceDisposedSum}
              />
            </div>
          </Splitter.Panel>
          <Splitter.Panel style={{ overflow: 'hidden' }}>
            <RightWrap></RightWrap>
          </Splitter.Panel>
        </Splitter>
      </div>
      <Particles
        particleColors={['#00d4ff', '#0066ff', '#40ffaa']}
        particleCount={150}
        particleSpread={10}
        speed={0.1}
        particleBaseSize={100}
        moveParticlesOnHover={false}
        alphaParticles={false}
        disableRotation={false}
        className="absolute"
      />
    </div>
  )
}

export default App
